import React, { useState, useEffect } from "react";
// 引入Ant Design组件库所需组件，用于快速构建UI界面
import { Table, Input, Button, Space, message, Modal } from "antd";
// 引入Ant Design图标组件，用于操作按钮的视觉标识
import {
  SearchOutlined, // 搜索图标
  PlusOutlined, // 新增图标
  EditOutlined, // 编辑图标
  DeleteOutlined, // 删除图标
} from "@ant-design/icons";
import CommonFormModal from "../../components/CommonFormModal";
import { useFormModal } from "../../hooks/useFormModal";
import { warehouseFormConfig } from "../../utils/formConfigs";
import axios from "axios";

// API基础URL
const API_BASE_URL = 'http://localhost:3000';

// 解构Input组件中的Search搜索框，简化后续使用
const { Search } = Input;

/**
 * 定义仓库数据的接口类型（TypeScript类型约束）
 * 用于规范仓库数据的结构，确保数据字段一致性，避免类型错误
 */
interface WarehouseItem {
  key: string; // 表格行唯一标识（Ant Design Table要求）
  id: number; // 仓库唯一ID（业务主键）
  code: string; // 仓库编码（如A01、B01）
  name: string; // 仓库名称（如生鲜A仓）
  remark: string; // 仓库备注（描述仓库用途等信息）
  creator: string; // 创建人（记录创建者账号）
  createTime: string; // 创建时间（格式：YYYY-MM-DD）
  modifier: string; // 修改人（记录最后修改者账号）
  modifyTime: string; // 修改时间（格式：YYYY-MM-DD）
}

/**
 * 后端返回的仓库数据结构
 */
interface BackendWarehouseItem {
  id: number;
  code: string;
  name: string;
  desc: string; // 后端使用desc字段
  add: string; // 后端使用add字段表示创建人
  addtime: string; // 后端使用addtime字段
  edit: string; // 后端使用edit字段表示修改人
  edittime: string; // 后端使用edittime字段
}

/**
 * 数据转换函数：将后端数据格式转换为前端需要的格式
 */
const transformBackendData = (backendData: BackendWarehouseItem[]): WarehouseItem[] => {
  return backendData.map(item => ({
    key: item.id.toString(),
    id: item.id,
    code: item.code,
    name: item.name,
    remark: item.desc,
    creator: item.add,
    createTime: item.addtime,
    modifier: item.edit,
    modifyTime: item.edittime,
  }));
};

/**
 * 数据转换函数：将前端数据格式转换为后端需要的格式
 */
const transformFrontendData = (frontendData: Partial<WarehouseItem>): Partial<BackendWarehouseItem> => {
  return {
    code: frontendData.code,
    name: frontendData.name,
    desc: frontendData.remark,
    add: frontendData.creator,
    addtime: frontendData.createTime,
    edit: frontendData.modifier,
    edittime: frontendData.modifyTime,
  };
};

/**
 * 仓库管理页面组件（核心功能组件）
 * 包含：数据展示、搜索筛选、新增/编辑/删除操作、批量删除等功能
 */
export default function Cangku() {
  // ====================== 状态管理（React Hooks）======================
  // 1. 仓库列表数据状态：存储当前展示的仓库数据，初始值为空数组
  const [warehouseData, setWarehouseData] = useState<WarehouseItem[]>([]);
  const [allWarehouseData, setAllWarehouseData] = useState<WarehouseItem[]>([]); // 存储所有数据用于搜索

  // 2. 搜索参数状态：存储用户输入的搜索条件（仓库编码、仓库名称）
  const [searchParams, setSearchParams] = useState({
    areaCode: "", // 仓库编码搜索关键词
    warehouseName: "", // 仓库名称搜索关键词
  });

  // 7. 选中行ID状态：存储表格中用户勾选的仓库ID，用于批量删除操作
  const [selectedRows, setSelectedRows] = useState<string[]>([]);

  // 使用通用表单弹窗Hook
  const {
    visible,
    isAddMode,
    currentRecord,
    loading,
    openAddModal,
    openEditModal,
    closeModal,
  } = useFormModal<WarehouseItem>();

  // ====================== 接口调用函数 ======================
  /**
   * 获取仓库列表数据
   */
  const fetchWarehouseData = async () => {
    try {
      const response = await axios.get(`${API_BASE_URL}/api/warehouse`);
      const transformedData = transformBackendData(response.data);
      setWarehouseData(transformedData);
      setAllWarehouseData(transformedData);
    } catch (error) {
      console.error('获取仓库数据失败:', error);
      message.error('获取仓库数据失败');
    }
  };

  /**
   * 新增仓库
   */
  const createWarehouse = async (data: Partial<WarehouseItem>) => {
    try {
      const backendData = transformFrontendData(data);
      const response = await axios.post(`${API_BASE_URL}/api/warehouse`, backendData);
      return response.data;
    } catch (error) {
      console.error('新增仓库失败:', error);
      throw error;
    }
  };

  /**
   * 更新仓库
   */
  const updateWarehouse = async (id: number, data: Partial<WarehouseItem>) => {
    try {
      const backendData = transformFrontendData(data);
      const response = await axios.put(`${API_BASE_URL}/api/warehouse/${id}`, backendData);
      return response.data;
    } catch (error) {
      console.error('更新仓库失败:', error);
      throw error;
    }
  };

  /**
   * 删除仓库
   */
  const deleteWarehouse = async (id: number) => {
    try {
      await axios.delete(`${API_BASE_URL}/api/warehouse/${id}`);
    } catch (error) {
      console.error('删除仓库失败:', error);
      throw error;
    }
  };

  // 组件挂载时获取数据
  useEffect(() => {
    fetchWarehouseData();
  }, []);

  // ====================== 业务逻辑函数 ======================
  /**
   * 处理搜索功能：根据用户输入的搜索条件过滤仓库数据
   * 逻辑：同时匹配仓库编码（不区分大小写）和仓库名称（不区分大小写），支持模糊搜索
   */
  const handleSearch = () => {
    // 从所有数据中过滤数据
    const filteredData = allWarehouseData.filter((item) => {
      // 编码匹配：搜索关键词为空则匹配所有，否则模糊匹配（转小写避免大小写问题）
      const codeMatch =
        searchParams.areaCode === ""
          ? true
          : item.code
              .toLowerCase()
              .includes(searchParams.areaCode.toLowerCase());
      // 名称匹配：逻辑同编码匹配
      const nameMatch =
        searchParams.warehouseName === ""
          ? true
          : item.name
              .toLowerCase()
              .includes(searchParams.warehouseName.toLowerCase());
      // 同时满足编码和名称匹配条件才保留该条数据
      return codeMatch && nameMatch;
    });

    // 更新展示的仓库数据为过滤后的数据
    setWarehouseData(filteredData);
    // 显示搜索结果提示（如"找到 3 条匹配记录"）
    message.success(`找到 ${filteredData.length} 条匹配记录`);
  };

  /**
   * 处理重置功能：清空搜索条件，恢复展示所有原始仓库数据
   */
  const handleReset = () => {
    // 清空搜索参数（编码和名称都设为空）
    setSearchParams({
      areaCode: "",
      warehouseName: "",
    });
    // 恢复仓库数据为所有数据
    setWarehouseData(allWarehouseData);
    // 显示重置成功提示
    message.info("已重置搜索条件");
  };

  /**
   * 打开新增仓库弹窗：初始化新增模式的弹窗状态
   */
  const handleAddWarehouse = () => {
    openAddModal();
  };

  /**
   * 打开编辑仓库弹窗：初始化编辑模式的弹窗状态，并加载待编辑记录的信息
   * @param record 待编辑的仓库记录（从表格行点击传递过来）
   */
  const handleEdit = (record: WarehouseItem) => {
    openEditModal(record);
  };

  /**
   * 处理单个仓库删除：弹出确认弹窗，确认后删除指定仓库
   * @param record 待删除的仓库记录
   */
  const handleDelete = (record: WarehouseItem) => {
    // 弹出确认弹窗（避免用户误操作）
    Modal.confirm({
      title: "确认删除", // 弹窗标题
      content: `确定要删除仓库 "${record.name}" 吗？此操作不可撤销。`, // 确认内容（提示不可撤销）
      okText: "确认", // 确认按钮文字
      cancelText: "取消", // 取消按钮文字
      /**
       * 点击"确认"后的回调函数：执行删除逻辑
       */
      onOk: async () => {
        try {
          await deleteWarehouse(record.id);
          // 重新获取数据
          await fetchWarehouseData();
          // 显示删除成功提示
          message.success(`仓库 "${record.name}" 已删除`);
        } catch {
          message.error('删除仓库失败');
        }
      },
    });
  };

  /**
   * 处理批量删除：删除表格中用户勾选的所有仓库
   */
  const handleBatchDelete = () => {
    // 先判断是否有选中的仓库，无选中则提示用户
    if (selectedRows.length === 0) {
      message.warning("请先选择要删除的仓库");
      return; // 无选中则终止函数，不执行后续逻辑
    }

    // 弹出批量删除确认弹窗
    Modal.confirm({
      title: "批量删除", // 弹窗标题
      content: `确定要删除选中的 ${selectedRows.length} 个仓库吗？此操作不可撤销。`, // 提示选中数量
      okText: "确认",
      cancelText: "取消",
      /**
       * 点击"确认"后的回调函数：执行批量删除逻辑
       */
      onOk: async () => {
        try {
          // 批量删除选中的仓库
          const deletePromises = selectedRows.map(id => deleteWarehouse(parseInt(id)));
          await Promise.all(deletePromises);
          
          // 重新获取数据
          await fetchWarehouseData();
          // 清空选中行记录（避免删除后仍显示选中状态）
          setSelectedRows([]);
          // 显示批量删除成功提示
          message.success(`已删除 ${selectedRows.length} 个仓库`);
        } catch {
          message.error('批量删除仓库失败');
        }
      },
    });
  };

  /**
   * 处理表单提交：根据当前模式（新增/编辑）执行对应的业务逻辑
   * 先通过表单验证，验证通过后再执行数据更新
   */
  const handleSubmit = async (values: Record<string, unknown>, isAddMode: boolean, currentRecord?: WarehouseItem | null) => {
    try {
      if (isAddMode) {
        // ---------------------- 新增仓库逻辑 ----------------------
        const newRecord: Partial<WarehouseItem> = {
          code: values.code as string,
          name: values.name as string,
          remark: values.remark as string,
          creator: "当前用户", // 模拟当前登录用户（实际项目从登录状态获取）
          createTime: new Date().toLocaleDateString(), // 当前日期（格式：YYYY/MM/DD）
          modifier: "当前用户", // 新增时修改人与创建人一致
          modifyTime: new Date().toLocaleDateString(), // 新增时修改时间与创建时间一致
        };

        await createWarehouse(newRecord);
        // 重新获取数据
        await fetchWarehouseData();
        // 显示新增成功提示
        message.success(`仓库 "${values.name}" 已创建`);
      } else {
        // ---------------------- 编辑仓库逻辑 ----------------------
        // 先判断是否有当前待编辑的记录（避免空值错误）
        if (currentRecord) {
          const updateData: Partial<WarehouseItem> = {
            code: values.code as string,
            name: values.name as string,
            remark: values.remark as string,
            modifier: "当前用户", // 更新修改人（实际项目从登录状态获取）
            modifyTime: new Date().toLocaleDateString(), // 更新修改时间为当前日期
          };

          await updateWarehouse(currentRecord.id, updateData);
          // 重新获取数据
          await fetchWarehouseData();
          // 显示编辑成功提示
          message.success(`仓库 "${values.name}" 已更新`);
        }
      }
    } catch {
      message.error(isAddMode ? '新增仓库失败' : '更新仓库失败');
    }
  };
  // ====================== 表格列配置（Ant Design Table）======================
  // 定义表格的列结构，每一列对应仓库数据的一个字段，包含标题、数据映射、渲染逻辑等
  const columns = [
    {
      // 第一列：复选框列（用于批量选择）
      title: "", // 列标题（为空，仅显示复选框）
      dataIndex: "checkbox", // 数据字段名（自定义，无实际数据映射）
      key: "checkbox", // 列唯一标识
      width: 40, // 列宽度（固定40px，避免复选框变形）
      // 自定义渲染：渲染复选框组件
      render: (_: unknown, record: WarehouseItem) => (
        <Input
          type="checkbox"
          // 控制复选框是否选中：判断当前记录ID是否在selectedRows中
          checked={selectedRows.includes(record.id.toString())}
          // 复选框状态变化时的回调：更新选中行列表
          onChange={(e) => {
            if (e.target.checked) {
              // 勾选：将当前记录ID添加到selectedRows
              setSelectedRows([...selectedRows, record.id.toString()]);
            } else {
              // 取消勾选：从selectedRows中移除当前记录ID
              setSelectedRows(selectedRows.filter((id) => id !== record.id.toString()));
            }
          }}
        />
      ),
    },
    {
      // 第二列：仓库ID
      title: "id", // 列标题
      dataIndex: "id", // 映射到WarehouseItem的id字段
      key: "id", // 列唯一标识
      // 自定义渲染：将ID显示为可点击的链接（实际项目可跳转至仓库详情页）
      render: (text: string) => <a href="#">{text}</a>,
    },
    {
      // 第三列：仓库编码
      title: "编码",
      dataIndex: "code", // 映射到WarehouseItem的code字段
      key: "code",
    },
    {
      // 第四列：仓库名称
      title: "仓库名称",
      dataIndex: "name", // 映射到WarehouseItem的name字段
      key: "name",
    },
    {
      // 第五列：仓库备注
      title: "备注",
      dataIndex: "remark", // 映射到WarehouseItem的remark字段
      key: "remark",
    },
    {
      // 第六列：创建人
      title: "创建人",
      dataIndex: "creator", // 映射到WarehouseItem的creator字段
      key: "creator",
    },
    {
      // 第七列：创建时间
      title: "创建时间",
      dataIndex: "createTime", // 映射到WarehouseItem的createTime字段
      key: "createTime",
    },
    {
      // 第八列：修改人
      title: "修改人",
      dataIndex: "modifier", // 映射到WarehouseItem的modifier字段
      key: "modifier",
      // 渲染为链接形式（可扩展跳转至修改日志等页面）
      render: (text: string) => <a href="#">{text}</a>,
    },
    {
      // 第九列：修改时间
      title: "修改时间",
      dataIndex: "modifyTime", // 映射到WarehouseItem的modifyTime字段
      key: "modifyTime",
      // 渲染为链接形式（可扩展跳转至历史版本等页面）
      render: (text: string) => <a href="#">{text}</a>,
    },
    {
      // 第十列：操作列（编辑/删除按钮）
      title: "操作",
      key: "operation", // 列唯一标识（无数据映射，仅用于渲染操作按钮）
      // 自定义渲染操作按钮组：使用Space组件控制按钮间距
      render: (_: unknown, record: WarehouseItem) => (
        <Space size="small">
          {/* 编辑按钮：点击触发handleEdit函数，传递当前行记录 */}
          <a
            href="#" // 用空链接避免页面跳转
            onClick={(e) => {
              e.preventDefault(); // 阻止链接默认跳转行为
              handleEdit(record); // 调用编辑函数，传入当前仓库记录
            }}
          >
            <EditOutlined /> 编辑 {/* 结合图标和文字，提升交互辨识度 */}
          </a>
          {/* 删除按钮：点击触发handleDelete函数，传递当前行记录 */}
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault(); // 阻止链接默认跳转行为
              handleDelete(record); // 调用删除函数，传入当前仓库记录
            }}
            style={{ color: "#ff4d4f" }} // 红色文字，警示删除操作
          >
            <DeleteOutlined /> 删除
          </a>
        </Space>
      ),
    },
  ];

  // ====================== 组件渲染（UI结构）======================
  return (
    // 外层容器：设置内边距，控制页面内容与浏览器边缘的距离
    <div style={{ padding: "24px" }}>
      {/* 1. 搜索区域：包含两个搜索框和搜索/重置按钮 */}
      <div
        style={{
          display: "flex", // 弹性布局：让子元素横向排列
          alignItems: "center", // 垂直居中对齐子元素
          marginBottom: "24px", // 底部间距：与下方按钮区域分隔
        }}
      >
        {/* 仓库编码搜索框 */}
        <Search
          placeholder="请输入库区编号" // 输入提示文本
          allowClear // 显示清除按钮：点击清空输入内容
          enterButton={<SearchOutlined />} // 回车按钮：显示搜索图标
          value={searchParams.areaCode} // 绑定搜索参数中的编码值（受控组件）
          // 输入变化时更新搜索参数的编码值
          onChange={(e) =>
            setSearchParams({
              ...searchParams, // 保留其他搜索参数（名称）
              areaCode: e.target.value, // 更新编码参数为输入值
            })
          }
          onSearch={handleSearch} // 点击搜索按钮或回车时触发搜索
          style={{ width: 200, marginRight: 16 }} // 固定宽度+右侧间距
        />
        {/* 仓库名称搜索框：逻辑与编码搜索框一致 */}
        <Search
          placeholder="请输入仓库名称"
          allowClear
          enterButton={<SearchOutlined />}
          value={searchParams.warehouseName}
          onChange={(e) =>
            setSearchParams({
              ...searchParams,
              warehouseName: e.target.value,
            })
          }
          onSearch={handleSearch}
          style={{ width: 200, marginRight: "auto" }} // marginRight:auto 把后续按钮推到右侧
        />
        {/* 搜索按钮：重复触发搜索（补充搜索框回车/图标按钮的操作） */}
        <Button
          type="primary" // 主按钮样式（蓝色），突出重要操作
          style={{ marginRight: 8 }} // 右侧间距：与重置按钮分隔
          onClick={handleSearch}
        >
          搜索
        </Button>
        {/* 重置按钮：恢复初始状态 */}
        <Button onClick={handleReset}>重置</Button>
      </div>

      {/* 2. 功能按钮区域：新增仓库 + 批量删除（选中时显示） */}
      <div
        style={{
          marginBottom: "24px", // 底部间距：与下方表格分隔
          display: "flex", // 弹性布局：让按钮横向排列
        }}
      >
        {/* 新增仓库按钮：突出显示，放在最左侧 */}
        <Button
          type="primary" // 主按钮样式
          icon={<PlusOutlined />} // 左侧显示新增图标
          onClick={handleAddWarehouse} // 点击打开新增弹窗
        >
          新增仓库
        </Button>
        {/* 批量删除按钮：仅当有选中行时显示（条件渲染） */}
        {selectedRows.length > 0 && (
          <Button
            danger // 危险按钮样式（红色），警示删除操作
            style={{ marginLeft: 16 }} // 左侧间距：与新增按钮分隔
            onClick={handleBatchDelete} // 点击触发批量删除
          >
            批量删除
          </Button>
        )}
      </div>

      {/* 3. 仓库列表表格：核心数据展示区域 */}
      <Table
        dataSource={warehouseData} // 表格数据源：绑定当前展示的仓库数据
        columns={columns} // 表格列配置：绑定上方定义的columns数组
        bordered // 显示表格边框：提升数据可读性
        rowKey="id" // 每行的唯一标识：使用仓库ID（避免列表渲染错乱）
        pagination={{
          // 分页配置（默认开启，可自定义页码、页大小等）
          pageSize: 10, // 每页显示10条数据
          showSizeChanger: true, // 显示页大小切换器（允许用户选择10/20/50条/页）
          showTotal: (total) => `共 ${total} 条记录`, // 显示总记录数
        }}
        scroll={{ x: 800 }} // 横向滚动：当表格列过多时，避免内容溢出（适配小屏幕）
      />

      {/* 4. 新增/编辑仓库弹窗：复用同一个弹窗，通过isAddMode区分模式 */}
      <CommonFormModal
        visible={visible}
        title={isAddMode ? "新增仓库" : "编辑仓库"}
        isAddMode={isAddMode}
        currentRecord={currentRecord}
        formItems={warehouseFormConfig}
        onSubmit={handleSubmit as unknown as (values: WarehouseItem, isAddMode: boolean, currentRecord?: WarehouseItem | null) => void | Promise<void>}
        onCancel={closeModal}
        loading={loading}
        width={500}
        maskClosable={false}
        destroyOnClose={true}
      />
    </div>
  );
}
